﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <#include "../inc/head.ftl"/>
    <@head/>
</head>
<body>
    <div id="wrapper">
        <#include "../inc/head_nav.ftl"/>
        <@head_nav/>
        <!--/. NAV TOP  -->
        <#include "../inc/nav.ftl"/>
        <@nav/>

        <!-- /. NAV SIDE  -->
        <div id="page-wrapper">
		  <div class="header">
              <h1 class="page-header">
                  服装店POS
              </h1>
              <ol class="breadcrumb">
                  <li><a href="/index">Home</a></li>
                  <li><a href="#">Order</a></li>

              </ol>

          </div>
            <div id="page-inner"> 
                <div class="row">
			     <div class="col-md-12">
        			<div class="panel panel-default">
        				<div class="panel-heading">
        				 订单管理
        				</div>        
							  
							<div class="panel-body"> 
								<div class="btn-group">
								   <table width="60%" class="table " >
			                        <tr>
			                            <td width="50px"><button id="addOrder" class="btn btn-success">新增销售订单</button></td>
                                        <td width="50px"><button id="addOrderDetail" class="btn btn-success">新增销售订单明细</button></td>
			                            <td width="50px"><button id="showOrderItems" class="btn btn-info">查看订单明细</button></td>
                                         </tr>
                   				 </table>
								</div>
							</div>
				    </div>
			     </div>	
			 </div>	
			 <div class="row">
			     <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                        </div>        
                                      
                        <div class="panel-body"> 
                            <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>时间</th>
                                        <th>经手人</th>
                                        <th>总金额</th>
                                        <th>订单状态</th>
                                        <th>备注</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                   
                	  </div>
            		</div>
                 </div>	
            </div>		
             <!-- /. ROW  -->
				</div>
				
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
        </div>
     <!-- /. WRAPPER  -->
     </div>
    <!-- JS Scripts-->
    <#include "../inc/foot.ftl"/>
    <@foot/>
  <script>
    $(document).ready(function() {
    	var table = $('#list').DataTable({
        	"ajax": '/order/list',
        	"language": {
    			"url": "/vendor/datatables/i18n/Chinese.json"
			},
            "columns": [
                 {"data": "id","visible" : false},
    			 {"data": "ordertime"},
                 {"data": "user.username"},
                {"data": "sumamount"},
                {"data": "ordertype"},
                {"data": "description"}
    	   ],
           responsive: true,
           select: true //datatables select 插件
        });

    	$('#addOrder').click( function () {
    		layer.open({  //layer弹出层
    			  type: 2,
    			  title:"添加订单",
    			  area: ['400px', '380px'],
    			  fixed: false, //不固定
    			  maxmin: true,
    			  content: '/order/add',
    			  end : function(index){
    				  table.ajax.reload();
    			  }
    		});
        } );
        $('#addOrderDetail').click( function () {
            var rowData =table.rows( { selected: true } ).data().toArray();
            if(rowData.length==1){
                var id = rowData[0].id;
            layer.open({  //layer弹出层
                type: 2,
                title:"添加订单明细",
                area: ['400px', '380px'],
                fixed: false, //不固定
                maxmin: true,
                content: '/order/addDetail?id='+id,
                end : function(index){
                    table.ajax.reload();
                }
            });
            }else{
                layer.msg('请选择一行!', {time: 1000, icon:7});
            }
        } );
        // $('#showOrder').click( function () {
        //     var rowData =table.rows( { selected: true } ).data().toArray();
        //     if(rowData.length==1){
        //         var id = rowData[0].clothing.id;
        //         layer.open({
        //             type: 2,
        //             title:"该服装进出库信息",
        //             area: ['600px', '400px'],
        //             fixed: false, //不固定
        //             maxmin: true,
        //             content:'/order/show1?id='+id,
        //             end : function(index){
        //                 table.ajax.reload();
        //             }
        //         });
        //     }else{
        //         layer.msg('请选择一行!', {time: 1000, icon:7});
        //     }
        // });
    	$('#showOrderItems').click( function () {
            var rowData =table.rows( { selected: true } ).data().toArray();
            if(rowData.length==1){
                var id = rowData[0].id;
	   		layer.open({
	    		type: 2,
	    		title:"查看订单明细信息",
                area: ['600px', '400px'],
                fixed: false, //不固定
                maxmin: true,
                content:'/order/show1?id='+id,
                end : function(index){
                    table.ajax.reload();
                }
	    	});
            }else{
                layer.msg('请选择一行!', {time: 1000, icon:7});
            }
    	 });

    	
    });

    </script> 
</body>
</html>
